<!--
 * @Description: 标签，目录表格组件
 * @Author: yue
 * @Date: 2022-09-18 11:51:31
 * @LastEditors: yue
 * @LastEditTime: 2022-09-19 23:20:42
-->

<!--
 * 自定义事件：
 * disable 禁用
 * edit 编辑
 * del 删除
 * changePage 页码
 * changePagesize 页容
 * 传值：
 * tableList 表格对象
-->

<template>
  <div>
    <!-- NOTE：提示栏 -->
    <el-alert
      class="message"
      :title="`数据一共${tableList.counts}条`"
      type="info"
      show-icon
      :closable="false"
    ></el-alert>

    <!-- NOTE：表格 -->
    <el-table :data="tableList.items">
      <el-table-column prop="id" label="序号"></el-table-column>
      <el-table-column prop="subjectName" label="所属学科"></el-table-column>
      <el-table-column
        :prop="title === '标签' ? 'tagName' : 'directoryName'"
        :label="`${title}名称`"
      ></el-table-column>
      <el-table-column prop="username" label="创建者"></el-table-column>
      <el-table-column v-slot="{ row }" label="创建日期">
        {{ parseTime(row.addDate) }}
      </el-table-column>
      <el-table-column
        v-if="title !== '标签'"
        prop="totals"
        label="面试题数量"
      ></el-table-column>
      <el-table-column v-slot="{ row }" label="状态">
        {{ row.state ? '已启用' : '已禁用' }}
      </el-table-column>
      <el-table-column v-slot="{ row }" label="操作">
        <el-button type="text" @click="disable(row)">
          {{ row.state ? '禁用' : '启用' }}
        </el-button>
        <el-button :disabled="!row.state" type="text" @click="edit(row)">
          修改
        </el-button>
        <el-button :disabled="!row.state" type="text" @click="del(row)">
          删除
        </el-button>
      </el-table-column>
    </el-table>

    <!-- NOTE：分页 -->
    <el-row type="flex" justify="end">
      <el-pagination
        :current-page="Number(tableList.page)"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="Number(tableList.pagesize)"
        layout="prev, sizes, pager, next, jumper"
        :total="tableList.counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import { parseTime } from '@/utils'

export default {
  props: {
    tableList: {
      type: Object,
      required: true
    }
  },
  computed: {
    title() {
      return this.$route.meta.title
    }
  },
  methods: {
    // 禁用
    disable(row) {
      this.$emit('disable', { id: row.id, state: row.state ? 0 : 1 })
      row.state = row.state ? 0 : 1
    },
    // 编辑
    edit(row) {
      this.$emit('edit', row)
    },
    // 删除
    del(row) {
      this.$emit('del', row)
    },
    // 格式化时间
    parseTime,
    // 页数改变
    handleSizeChange(pagesize) {
      this.$emit('changePagesize', pagesize)
    },
    // 页码改变
    handleCurrentChange(page) {
      this.$emit('changePage', page)
    }
  }
}
</script>

<style lang="scss" scoped>
// 提示框
.message {
  margin: 20px 0;
}
// 分页
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
// 跳转
::v-deep .el-pagination .el-pagination__jump {
  float: right;
  margin-left: 6px;
}
// 页码
::v-deep .el-pagination .el-pager {
  float: left;
  .number,
  .more {
    min-width: 0;
    width: 30px;
    height: 28px;
    margin: 0 8px;
    background-color: #f4f4f5;
  }
  .active {
    background-color: #409eff;
    color: #fff;
  }
}
// 左按钮
::v-deep .el-pagination .btn-prev {
  float: left;
  min-width: none;
  width: 30px;
  height: 28px;
  margin-right: 8px;
  background-color: #f4f4f5;
}
// 右按钮
::v-deep .el-pagination > .btn-next {
  float: left;
  width: 30px;
  height: 28px;
  margin-left: 8px;
  margin-right: 10px;
  text-align: center;
  background-color: #f4f4f5;
}
// 按钮
::v-deep .el-pagination button,
.el-pagination span:not([class*='suffix']) {
  min-width: 0;
  padding: 0;
}
</style>
